<template>
  <div>
    <h1>vuex计数器</h1>
    <!-- 
        使用vuex第一步
        下载 npm i -S vuex@3
        vuex的相关文件 store文件件或者vuex文件夹index.js
        state mutations actions getters
        在入口文件引入store 在vue配置选项中配置vuex
        所有组件都多了个 this.$store对象

    -->
    <h2>{{ count }}</h2>
    <h2>{{ evenOrOdd }}</h2>
    <button @click="add">+</button>
    <button @click="decrement">-</button>
    <button @click="addIfEven">如果是偶数+1</button>
    <button @click="decrementIfOdd">如果是奇数延迟1000ms-1</button>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$store); //$store核心对象
  },
  // 在computed中调用state和getters中的值
  computed: {
    count() {
      return this.$store.state.count;
    },
    evenOrOdd() {
      return this.$store.getters.evenOrOdd;
    }
  },
  // 在methods中调用actions和mutations中的函数
  methods: {
    add() {
      this.$store.commit("add");
    },
    decrement() {
      this.$store.commit("decrement");
    },
    addIfEven() {
      this.$store.dispatch("addIfEven");
    },
    decrementIfOdd() {
      this.$store.dispatch("decrementIfOdd");
    }
  }
};
</script>

<style></style>
